<template>
    <div class="home_warp">
        <div class="overlay-pop">
            <div class="img-video"></div>
            <!-- <div class="uav-video"></div> -->
        </div>

        <!-- wrjoverlay-pop -->
        <div class="overlay-pop wrjoverlay-pop">
            <!-- <div class="img-video"></div> -->
            <div class="uav-video"></div>
        </div>

        <!-- <div class="top-bottom-bg"></div> -->
        <!-- 页面头部组件 -->

        <div class="home_warp_map">
            <mapdom ref="mapDomRef" />
        </div>
        <HeaderDom />

        <!-- 头部和底部的背景图 -->


        <div class="home_warp_bottom">
            <bottomBtn @menuBtnClickfun="menuBtnClickfun" />
        </div>

        <city />

        <router-view />

        <el-dialog v-model="dialogVisibleshipin"  width="900" :before-close="handleClose" custom-class="dialog_new">
           <template #header="{ close, titleId, titleClass }">
            <div class="my-header">
                <div :id="titleId" :class="titleClass" class="my-header_title">
                    <span>{{ dialongtitle }}</span>
                </div>
            </div>
            <shipin v-if="activetype === 'sp'"/>
            <wurenji v-if="activetype === 'wrj'"/>
        </template>
    
        </el-dialog>
    </div>

</template>

<script setup>
import { ref, onMounted, reactive, nextTick } from "vue";
import mapdom from "../../components/map/map.vue";
import HeaderDom from '../../components/header/index.vue'
import bottomBtn from './comend/bottomBtn.vue'
import city from "./comend/city.vue";
import shipin from "./comend/shipin.vue";
import wurenji from "./comend/wurenji.vue";
import eventBus from '../../event/eventBus.js';
import { useRouter } from 'vue-router';
const router = useRouter();
const mapDomRef = ref(null)
const activeMenu = ref(null)
const dialogVisibleshipin = ref(false)
const dialongtitle = ref('')
const activerow = ref(null)
// 模块切换的事件
const menuBtnClickfun = (row) => {
    activeMenu.value = row
    router.push(row.path)
}
const activetype = ref('')
const addEventListenerbus = () => {
    eventBus.on('shipinClick', row => {
        dialongtitle.value = row.video_station
        dialogVisibleshipin.value = true
        activerow.value = row
        activetype.value = 'sp'
    })


    eventBus.on('wurenjiClick', row => {
         dialongtitle.value = row.drone_name
           dialogVisibleshipin.value = true
          activerow.value = row
            activetype.value = 'wrj'
        console.log(row, '33333333333333')
    })
}

const handleClose = ()=>{
     activerow.value = null
     dialongtitle.value = ''
       activetype.value = ''
     dialogVisibleshipin.value = false
}

onMounted(() => {
    addEventListenerbus()
})
</script>


<style lang="less" scoped>
.home_warp {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background: url(../../assets/image/home/bg.png) no-repeat;
    background-size: 100% 100%;
    position: relative;

    .top-bottom-bg {
        position: absolute;
        height: 100%;
        width: 100%;
        background: url(../../assets/image/home/top-bottom-bg.png) no-repeat;
        background-size: 100% 100%;
        z-index: 10;
    }

    .home_warp_map {
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        position: absolute;
        z-index: 9;
    }

    .home_warp_bottom {
        position: absolute;
        z-index: 10;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 0);
        width: 50%;
        background: url(../../assets//image//home/bottom1.png) no-repeat;
        background-size: inherit;
    }


}
</style>